<!-- banner -->
<div class="banner-main" style="background-image:url('../../assets/img/banner1.jpeg')"></div>
<div class="wrapper-slide">
    <div class="color-block">
        <div class="ad-wall">
            <div class="ad-block" style="padding: 150px;">
                <div class="inner-ad-block">
                    <p class="first-text-p ad-text">Lampta对每一个视频进行严格把关</p>
                    <p class="ad-text">只为给您提供最专业的知识</p>
                    <p class="ad-text">准备好了跟我们一起学习最好的课程了吗？</p>
                    <div class="button-row button-join text-center">
                        <button class="btn-basic" mat-raised-button routerLink="/login">加入我们</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- 空白 -->
<div class="block-nav"></div>
<!-- 空白 -->

<div class="main-content">

    <!-- 首页推荐课程 -->
    <div class="top-courses">
        <div class="top-course-item">
            <a href="/">
                <div class="top-course-img">
                    <img src="../../assets/img/php.png" alt="">
                </div>
            </a>
            <div class="top-course-info">
                <div class="top-course-buttom-left">
                    <p class="top-course-title">PHP 面向对象基础</p>
                    <p class="top-course-gray">共 24 个视频</p>
                </div>
                <div class="top-course-buttom-right">
                    <img width="30px" src="../../assets/img/play.png" alt="">
                </div>
            </div>
        </div>
        <div class="top-course-item">
            <a href="/">
                <div class="top-course-img">
                    <img src="../../assets/img/php.png" alt="">
                </div>
            </a>
            <div class="top-course-info">
                <div class="top-course-buttom-left">
                    <p class="top-course-title">PHP 面向对象基础</p>
                    <p class="top-course-gray">共 24 个视频</p>
                </div>
                <div class="top-course-buttom-right">
                    <img width="30px" src="../../assets/img/play.png" alt="">
                </div>
            </div>
        </div>
        <div class="top-course-item">
            <a href="/">
                <div class="top-course-img">
                    <img src="../../assets/img/php.png" alt="">
                </div>
            </a>
            <div class="top-course-info">
                <div class="top-course-buttom-left">
                    <p class="top-course-title">PHP 面向对象基础</p>
                    <p class="top-course-gray">共 24 个视频</p>
                </div>
                <div class="top-course-buttom-right">
                    <img width="30px" src="../../assets/img/play.png" alt="">
                </div>
            </div>
        </div>
        <div class="top-course-item">
            <a href="/">
                <div class="top-course-img">
                    <img src="../../assets/img/php.png" alt="">
                </div>
            </a>
            <div class="top-course-info">
                <div class="top-course-buttom-left">
                    <p class="top-course-title">PHP 面向对象基础</p>
                    <p class="top-course-gray">共 24 个视频</p>
                </div>
                <div class="top-course-buttom-right">
                    <img width="30px" src="../../assets/img/play.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- 首页推荐课程结束 -->

    <!-- 首页发展路径 -->
    <div class="dev-path clearfix">
        <div class="dev-path-left">
            <div class="dev-path-inner-top">
                <div class="dev-path-big-title">专业路径</div>
                <div class="dev-path-first-title">PHP开发工程师</div>
            </div>
            <div class="dev-path-inner-bottom">
                <a href="/">
                    <img src="../../assets/img/phper.png" width="300px" alt="">
                </a>
            </div>
        </div>

        <div class="dev-path-right">
            <div class="dev-row">
                <div class="dev-right-item">
                    <a href="/">
                        <img src="../../assets/img/frontend.png" width="440px" height="163px;" alt="">
                    </a>
                </div>
                <div class="dev-right-item">
                    <a href="/">
                        <img src="../../assets/img/yunwei.png" width="440px" height="163px;" alt="">
                    </a>
                </div>
            </div>

            <div class="dev-row">
                <div class="dev-right-item">
                    <a href="/">
                        <img src="../../assets/img/database.png" width="440px" height="163px;" alt="">
                    </a>
                </div>
                <div class="dev-right-item">
                    <a href="/">
                        <img src="../../assets/img/mobile.png" width="440px" height="163px;" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- 首页发展路径结束 -->

</div>

<!-- 首页课程列表 -->
<div class="catewrapper">
    <main class="tabs-wrapper">

        <input id="tab1" type="radio" name="tabs" checked>
        <label for="tab1">后端课程</label>

        <input id="tab2" type="radio" name="tabs">
        <label for="tab2">数据库</label>

        <input id="tab3" type="radio" name="tabs">
        <label for="tab3">移动开发</label>

        <input id="tab4" type="radio" name="tabs">
        <label for="tab4">运维</label>

        <section class="section-tabs" id="content1">
            <div class="section-item">
                <a href="javascript:void(0)" routerLink="/detail">
                    <div class="course-img">
                        <img style="height:240px" src="../../assets/img/php340x240.png" alt="">
                    </div>
                    <div class="course-intro-wrapper">
                        <div class="course-author">Neo Lee</div>
                        <div class="course-title">PHP面向对象编程</div>
                        <div class="course-intro">Python Web 开发工程师微专业由云课堂联合麻瓜编程出品， 从Python基础入门到网站开发实战，体系化的课程设计，全面囊括Python学习中所有技能。</div>
                        <div class="course-enter text-right">
                            <img width="50px" src="../../assets/img/enter.png" alt="">
                        </div>
                    </div>
                </a>
            </div>

            <div class="section-item">
                <a href="javascript:void(0)" routerLink="/detail">
                    <div class="course-img">
                        <img style="height:240px" src="../../assets/img/php340x240.png" alt="">
                    </div>
                    <div class="course-intro-wrapper">
                        <div class="course-author">Neo Lee</div>
                        <div class="course-title">PHP面向对象编程</div>
                        <div class="course-intro">Python Web 开发工程师微专业由云课堂联合麻瓜编程出品， 从Python基础入门到网站开发实战，体系化的课程设计，全面囊括Python学习中所有技能。</div>
                        <div class="course-enter text-right">
                            <img width="50px" src="../../assets/img/enter.png" alt="">
                        </div>
                    </div>
                </a>
            </div>

            <div class="section-item">
                <a href="javascript:void(0)" routerLink="/detail">

                    <div class="course-img">
                        <img style="height:240px" src="../../assets/img/php340x240.png" alt="">
                    </div>
                    <div class="course-intro-wrapper">
                        <div class="course-author">Neo Lee</div>
                        <div class="course-title">PHP面向对象编程</div>
                        <div class="course-intro">Python Web 开发工程师微专业由云课堂联合麻瓜编程出品， 从Python基础入门到网站开发实战，体系化的课程设计，全面囊括Python学习中所有技能。</div>
                        <div class="course-enter text-right">
                            <img width="50px" src="../../assets/img/enter.png" alt="">
                        </div>
                    </div>
                </a>

            </div>


            <div class="section-item">
                <a href="javascript:void(0)" routerLink="/detail">

                    <div class="course-img">
                        <img style="height:240px" src="../../assets/img/php340x240.png" alt="">
                    </div>
                    <div class="course-intro-wrapper">
                        <div class="course-author">Neo Lee</div>
                        <div class="course-title">PHP面向对象编程</div>
                        <div class="course-intro">Python Web 开发工程师微专业由云课堂联合麻瓜编程出品， 从Python基础入门到网站开发实战，体系化的课程设计，全面囊括Python学习中所有技能。</div>
                        <div class="course-enter text-right">
                            <img width="50px" src="../../assets/img/enter.png" alt="">
                        </div>
                    </div>
                </a>

            </div>

            <div class="section-item">
                <a href="javascript:void(0)" routerLink="/detail">

                    <div class="course-img">
                        <img style="height:240px" src="../../assets/img/php340x240.png" alt="">
                    </div>
                    <div class="course-intro-wrapper">
                        <div class="course-author">Neo Lee</div>
                        <div class="course-title">PHP面向对象编程</div>
                        <div class="course-intro">Python Web 开发工程师微专业由云课堂联合麻瓜编程出品， 从Python基础入门到网站开发实战，体系化的课程设计，全面囊括Python学习中所有技能。</div>
                        <div class="course-enter text-right">
                            <img width="50px" src="../../assets/img/enter.png" alt="">
                        </div>
                    </div>
                </a>

            </div>

            <div class="section-item">
                <a href="javascript:void(0)" routerLink="/detail">

                    <div class="course-img">
                        <img style="height:240px" src="../../assets/img/php340x240.png" alt="">
                    </div>
                    <div class="course-intro-wrapper">
                        <div class="course-author">Neo Lee</div>
                        <div class="course-title">PHP面向对象编程</div>
                        <div class="course-intro">Python Web 开发工程师微专业由云课堂联合麻瓜编程出品， 从Python基础入门到网站开发实战，体系化的课程设计，全面囊括Python学习中所有技能。</div>
                        <div class="course-enter text-right">
                            <img width="50px" src="../../assets/img/enter.png" alt="">
                        </div>
                    </div>
                </a>

            </div>
        </section>

        <section class="section-tabs" id="content2">

        </section>

        <section class="section-tabs" id="content3">

        </section>

        <section class="section-tabs" id="content4">

        </section>

    </main>
</div>

<!-- 课程列表结束 -->